<template>
    <div class="user">
        	<!-- 搜索 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" style="margin-top:-10px;">
            <el-form-item label="日期:" prop="createTime">
                <el-date-picker :clearable="false" v-model="indatetime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"	value-format="timestamp"/>
            </el-form-item>
            <el-form-item>
                    <el-button icon="el-icon-search" type="primary"   @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
                    <el-button icon="el-icon-download" type="warning"  @click="handleExport">导出</el-button>
            </el-form-item>
        </el-form>
        <div style="width:100%;">
            <el-table :data="userList"  border style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="60"/>
								<el-table-column  prop="cardname"  label="姓名" ></el-table-column>
                <el-table-column   label="照片" >
                     <template slot-scope="scope">
                        <img :src="scope.row.image" style="height:50px;" alt="">
                    </template>
                </el-table-column>
                <el-table-column  prop="temperature"  label="体温" width="100"></el-table-column>
                <el-table-column  prop="createTime"  label="时间" :formatter="dateFormat"/>
                <el-table-column  prop="address"  label="地址" ></el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
                  <template slot-scope="{row}">
                    <el-button  type="text" @click="hanleEquiment(row)">
                        查看设备
                    </el-button> 
                    <el-button  type="text" @click="hanlePeople(row)">
                      查看人员
                    </el-button> 
                  </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
// import myTree from "@/components/assembly/tree.vue";
import { formatDate } from '@/utils'//导出Excel时间解析

export default {
	components: {},
    data(){
        return{
            id:'',
            address:'',
            nick:'',
            phone:'',
            token:'',
            input:'',
            inputValue1:'',
            userListAll:'',
            userList: [],
            currentPage:1,
            total: 0,
            page: 1,
            pageSize: 5,
            num:0,
            queryParams: {
                start:'',
                end: '',//日期
            },
            indatetime:[new Date(new Date().toLocaleDateString()).getTime(),new Date ().getTime ()],//搜索时间区间
        }
    },
    mounted(){
        this.token=sessionStorage.getItem('token')
        this.getUserList()
    },
    methods:{
			//时间格式化
				dateFormat:function(row,column){
						var t=new Date(row.createTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
						return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds();
				},
				/** 搜索按钮操作 */
				handleQuery() {
					this.total = 1;
					this.page = 1;
					this.getUserList();
				},
				/** 重置按钮操作 */
				resetQuery() {
          this.indatetime=[new Date(new Date().toLocaleDateString()).getTime(),new Date ().getTime ()],//搜索时间区间
					this.handleQuery();
				},
        // 获取用户列表
        getUserList(){
					 let start =	this.queryParams.start = parseInt( (this.indatetime[0])/1000);
					 let end =	this.queryParams.end =  parseInt( (this.indatetime[1])/1000);
            this.axios({
                url:'/monitor/Sys/sn/getdept?start='+start+'&end='+end,
                method:'get',
                headers:{Authorization:this.token}
            }).then(res=>{
                if(res.status==200){
                    this.userListAll=res.data.data
                    this.userList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
                    this.total=this.userListAll.length
                }else{
                    alert(res.data.msg);
                }
            })
        },
        // 查询
        // search(){
        //     this.axios({
        //         url:'',
        //         method:'post',
        //         data:inputValue1,
        //         headers:{Authorization:this.token}
        //     }).then(res=>{
        //         console.log('查询成功',res.data)
        //         if(res.status==200){
        //             this.userList=res.data.data
        //         }else{
        //             alert(res.data.msg);
        //         }
        //     })
        // },
     
        handleSizeChange(val) {//分页
            this.pageSize = val;
            this.userList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
            this.total=this.userListAll.length
        //   this.getUserList();
        },
        handleCurrentChange(val) {//分页
            this.page = val;
            this.userList=this.userListAll.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
            this.total=this.userListAll.length
        //   this.getUserList();
        },
				hanleEquiment(row){//设备--------------跳转人员表？
					this.$router.push({name: "PeopleEquipment",params: { row: row }});
					this.$emit("pagetitleChange", '关联设备','/index/PeopleEquipment',3,0,0);//调用父组件函数，并传值
					console.log(row,'index-传参');
				},
        hanlePeople(row){//查看人员
          this.$router.push({name: "People",params: { row: row }});
          this.$emit("pagetitleChange", '查看人员','/index/people',3,0,0);//调用父组件函数，并传值
        },  
         handleExport() {
            const Title = this.Title
            console.log(Title,'Title')
            import('@/vendor/Export2Excel').then(excel => {
                const tHeader =  ['姓名','体温','时间','地址',]
                const filterValue =['cardname','temperature','createTime','address',]
                let Data = this.userListAll
                const list = Data;
								const data = this.formatJson(filterValue, list);
								console.log(data,'解析后');
                excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename:'人员信息表'
                })
            });
				},
        // formatJson(filterVal, jsonData) {
        //     return jsonData.map((v) => filterVal.map((j) => v[j]));
				// }
				formatJson(filterVal,jsonData) {
					return jsonData.map(v => filterVal.map(j => {
						if (j === 'createTime') {
							return formatDate(v[j])//时间解析出来了具体的几点几分
						} else {
							return v[j]
						}
							//  return v[j]//没有解析时间返回的是那一天
					}))
				},
				
    },

}
</script>

<style scoped>
.user{
    min-height: calc(100% - 80px);
    position: relative; 
    min-width: calc(100% - 204px);
    margin-bottom: 50px;
}
.search{
    width: 100%;
    display: flex;
    justify-content:left;
    margin-bottom: 20px;
}
.search-top{
    display: flex;justify-content: left;
}
.pagination{
    position: absolute;
    bottom: -30px;
}
</style>
<style>
.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
    text-align: center;
}
</style>